import React, { Component } from 'react';
import { HashRouter as Router, Switch, Route, NavLink } from 'react-router-dom' ;
import CommentsLi from "./CommentsLi.js"

class NewsDetail extends Component {
    constructor(props, context) {
        super(props)
        this.state ={
        comments: [], 
            data: {}
        }
      }
      getComment(){
        var params = this.props.match.params;
        fetch("/api/comments/list",{
            method:"POST" ,
            headers: {
                'Content-Type':'application/x-www-form-urlencoded'
              },
            body: `cateId=5aa7bf0dc6c26246c378727e&rows=10&newsId=${params.id}`
        }).then(res=>{
            return res.json();
          }).then((data) => {
              this.setState({
                comments:data
              })
        })
    }
      getData(){
        var params = this.props.match.params;
        fetch(`/api/news/data/${params.id}`).then(res=>{
            return res.json();
          }).then((data) => {
              this.setState({
                data:data
              })
        })
    }
    componentDidMount(){
        this.getData();
        this.getComment();
    }
    render() {
        var news = this.state.data;
        return (
            <div>
              <article className="article padding-side">
              <div className="article__header new-style-test-article__header">
                <h1 className="article__title">{news.title}</h1>
              </div>
              <div className="titleBottom">
                    <span className="author">作者：{news.author}</span>
                </div>
                        <div className="desDiv" style={{width:'100%',padding:'0', marginTop:'10px'}}>
                <div style={{padding:'3px 5px'}}>
                <span className="zy">摘要</span>
                <span>{news.brief}</span>
                </div>
                </div>
                      <div className="article__content">
                <div style={{fontSize:'16px',color:'#333', lineHeight:'24px'}}>
                  <img className="aligncenter size-full wp-image-1478" src={news.tp} alt="父亲节"/>
                  <br/><blockquote dangerouslySetInnerHTML={{__html: news.content}}></blockquote></div>
              </div>
              <div className="titleBottom" style={{border:'0'}}>
                    <span className="author">发布时间：{news.sj}&nbsp;</span>
                    <span className="author" style={{float:'right'}}>出处：{news.source}&nbsp;</span>
                </div>
            </article>
            <div className="arc_div arc_div_center"    style={{margin: '0 auto',width: '65%'}}>
                    <div className="pl">
                        <ul>
                                {this.state.comments.rows && this.state.comments.rows.map(
                                    (item,index) =>{
                                        return   <CommentsLi data={item} key={index}/>
                                    }
                                )}
                        </ul>
                        </div>
            </div>
            </div>
        );
    }
}
export default NewsDetail;
